<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>个人资料</title>
		<style>
			* {margin: 0;padding: 0;}
			.main {
				width: 220px;
				margin:10px auto;
				border: 1px solid #ccc;
			}
			
			.head {
				height: 30px;
				background-color: #ecedee;
			}
			.head h3 {
				font:bold 16px/30px "微软雅黑";
				text-indent: 8px;
			}
			
			.photo {
				height:190px;
				width:190px;
				margin: 15px;
				border: 1px solid #ccc;
			}
			.photo img {
				width:180px;
				height:180px;
				border: 5px solid #ccc;
				border-radius: 30px;
			}
			.content .id {
				width:75px;
				margin:10px auto;
				text-indent: 10px;
			}
			.content .id input {
				width:75px;
				height: 2.1em;
				background:#eee url(logo.jpg)  no-repeat 4px 1px;
				margin-top:5px;
			}
			.content .logo1 {
				width:1.1em;
				height: 1.1em;
			}
			
			.footer {
				height:100px;
				border-top:1px dotted #eee;
			}
			.footer .chat {
				width:150px;
				margin: 25px auto;
			}
			.footer .chat input {
				margin:5px;
				width:60px;
			}
		</style>
	</head>
	<body>
		<div class="main">
			<div class="head">
				<h3>个人资料</h3>
			</div>
			<div class="content">
				<div class="photo">
					<img src="me.jpeg" />
				</div>
				<div class="id">Sword<img class="logo1" src="V.png"  />
					<input type="button" value="微博">
				</div>
				
				
			</div>
			<div class="footer">
				<div class="chat">
					<input type="button" value="加好友" />
					<input type="button" value="发纸条" />
					<input type="button" value="写留言" />
					<input type="button" value="加关注" />
				</div>
			</div>
		</div>
	</body>
</html>

